<template>
  <div>
    <CustomTable
      :showAlert="false"
      ref="table"
      :columns="columns"
      :loading="loading"
      :dataSource="pageData"
      :showHeader="false"
      :scroll="{ y: 490 }"
      :showSelection="false"
      @change="onTableChange"
    >
      <template slot="name" slot-scope="text, record">
        <!-- <p class="itemFBox">
          <span>情报ID：<j-ellipsis :value="record.infoCode" :length="10" /></span>
          <span class="sp">发布时间：{{ record.publishedTime }}</span>
          <span class="sp">发布位置：{{ record.publishedArea }}</span>
          <span class="sp">推送时间：{{ record.pushTime }}</span>
          <span class="sp">商品价格：¥ {{ record.goodsPrice }}</span>
          <span class="sp">评价数量：{{ record.chatNum }}</span>
          <a-tag>{{ record.goodsType }}</a-tag>
        </p> -->
        <a-card bordered class="card card2">
          <template slot="cover">
            <p class="tp" v-if="record.material != undefined">
              {{ record.material.storageLocation }} <span class="sp">＞</span>
            </p>
            <p class="p1">
              <span class="sp1">物资名称：</span
              ><span class="sp2" v-if="record.information != undefined">{{ getMaterial(record.information) }}</span>
            </p>
          </template>
        </a-card>
      </template>
    </CustomTable>
  </div>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import * as api from '@/api/xlgc/alarmCenter.js'
export default {
  components: {
    CustomTable
  },
  data() {
    return {
      loading: false,
      columns: [
        {
          title: '',
          dataIndex: 'name',
          align: 'left',
          // width: 130,
          scopedSlots: { customRender: 'name' }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {
        records: [
          {
            name: '1111'
          }
        ]
      }
    }
  },
  created() {},
  async mounted() {},
  methods: {
    getData(params) {
      this.pageFilter = Object.assign(this.pageFilter, params)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      api
        .searchMaterial(this.pageFilter)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
            this.loading = false
            // this.$refs.table.onClearRowKeys()
          } else {
            this.loading = false
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    getMaterial(arr) {
      let str = ''
      arr.forEach(item => {
        str += item.materialName + '，'
      })
      return str
    },
    // 详情
    onDetail(record) {
      this.$router.push({
        path: '/smuggleInformation/detail',
        query: {
          id: record.id
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.card {
  .tp {
    color: #000;
    font-weight: bold;
    .sp {
      position: absolute;
      right: 20px;
    }
  }
  .p1 {
    margin-bottom: 5px;
  }
  .sp1 {
    font-size: 14px;
    color: #666;
  }
  .sp2 {
    // margin-left: 20px;
    font-size: 14px;
    color: #000;
  }
}

/deep/.ant-table-thead > tr > th {
  background-color: #fff;
}
/deep/.ant-table-tbody .ant-table-row td {
  padding-bottom: 0;
}
/deep/.ant-table-tbody > tr > td {
  padding: 0;
}
</style>
